@extends('web.layout')

@section('style')
    @parent
    <link rel="stylesheet" type="text/css" href="{{ asset('static/less/goods.css') }}?ver={{ config('app.asset_version') }}"/>
    <style>
        .g-icons{
            width: 60%;
            min-width: 340px;
            justify-content: space-between;
        }

        .goods-body{
            margin-top: 12px;
        }
        @media screen and (max-width: 1024px){
            .g-icons{
                width: 100%;
                min-width: 100%;
                justify-content: space-between;
            }
            .breadcrumb{
                width: 100%;
                margin-top: 30px;
            }
        }
    </style>
@stop

@section('script')
    @parent
    <script>
        const voiceplay = $('#playbutton .voiceplay');
        const voicestop = $('#playbutton .voicestop');
        var timerElement = $('#timer');
        var timeRemaining = parseInt(timerElement.attr('data-time'));
        var timeRemainingCount = parseInt(timerElement.attr('data-time'));
        var timerInterval;

        function updateTimerDisplay() {
        var minutes = Math.floor(timeRemaining / 60);
        var seconds = timeRemaining % 60;
        var timeString = seconds + '"';
        timerElement.text(timeString);
        }

        function startCountdown() {
            timerInterval = setInterval(function() {
                timeRemaining--;

                if (timeRemaining >= 0) {
                updateTimerDisplay();
                } else {
                clearInterval(timerInterval);
                timeRemaining = timeRemainingCount;
                updateTimerDisplay();
                voiceplay.show();
                voicestop.hide();
                $('.voiceline').removeClass('voiceiconplay');
                }
            }, 1000);
        }

        $(function() {
            $('#playbutton').click(function() {
                if (voiceplay.is(':visible')) {
                    voiceplay.hide();
                    voicestop.show();
                    $('.voiceline').addClass('voiceiconplay');
                    voice.play();

                    clearInterval(timerInterval);
                    timeRemaining = timeRemainingCount;
                    updateTimerDisplay();
                    startCountdown();




                } else {
                    voiceplay.show();
                    voicestop.hide();
                    $('.voiceline').removeClass('voiceiconplay');
                    voice.pause();
                    voice.currentTime = 0;

                    clearInterval(timerInterval);
                    timeRemaining = timeRemainingCount;
                    updateTimerDisplay();
                }



            });


            $('.preview-item').click(function () {
                var src = $(this).find('img').attr('src')
                $(this).addClass('chosen').siblings().removeClass('chosen');

                if($(this).hasClass('preview-video')){
                    var video = $('#cover-video')[0]; 
                    video.currentTime = 0;
                    $('#cover-video').css('z-index',2);

                }else{
                    $('#cover-video').css('z-index',0);
                    $('#cover').attr('src',src).show();
                }

                if($(this).index() > 0){
                    $('.pic .name').hide()
                    $('.pic .body').hide()
                }else{
                    $('.pic .name').show()
                    $('.pic .body').show()
                }


            })

            $('.list-vedio').click(function () {
                $('#cover-video').trigger('play');
                $('#cover-video').css('z-index',2);
                $('#cover').css('z-index',0);
                $(this).addClass('chosen').siblings().removeClass('chosen');
            })

        });

    </script>

    <script>
        $(document).ready(function () {
            $('.qa-card').each(function () {
                var cardHeight = $(this).height();
                $(this).height(cardHeight);
            });

            setTimeout(function () {
                $('.qa-card').addClass('card-hide');
                $('.title-toggle').addClass('toggle-off');
            }, 1000);

            $('.qa-card').click(function () {
                if ($(this).hasClass('card-hide')) {
                    $(this).removeClass('card-hide');
                    $(this).find('.title-toggle').removeClass('toggle-off');
                } else {
                    $(this).addClass('card-hide');
                    $(this).find('.title-toggle').addClass('toggle-off');
                }
            });
            
        });
    </script>
@stop

@section('title',$goods->name)


@section('topic-title',$goods->name)

@section('og-image',asset_upload(collect($goods->img)->first()))

@section('banners')@stop
@section('content')


    <div class="container no-curtain">

        <div class="main">
            <div class="wrap">

                <ul class="breadcrumb">
                    <li><a href="{{ url('/') }}">首頁</a></li>
                    <li><a href="{{ url('team-detail/'.$goods->team_id) }}">{{ $goods->team->name }}</a></li>
                    <li class="active">{{ $goods->name }}</li>
                </ul>

                <div class="goods-body" style="--font-family:{{ $goods->font?$goods->font->name:"font1" }}">
                    <div class="goods">
                        <div class="left-pic">
                            <ul class="preview">
                                <li class="preview-item chosen">
                                    <img src="{{ asset_upload($goods->img) }}" alt="{{$goods->name}}">
                                </li>
                                @foreach($goods->atlas as $atlas)
                                <li class="preview-item">
                                    <img src="{{ asset_upload($atlas) }}" alt="{{$goods->name}}">
                                </li>
                                @endforeach

                                <li class="preview-item preview-video" data-inquire="" data-inquire-type="vedio" data-inquire-position="詳情">
                                    <svg t="1689910278906" class="playicon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4144" width="200" height="200"><path d="M514 114.3c-219.9 0-398.9 178.9-398.9 398.9 0.1 219.9 179 398.8 398.9 398.8 219.9 0 398.8-178.9 398.8-398.8S733.9 114.3 514 114.3z m173 421.9L437.1 680.5c-17.7 10.2-39.8-2.6-39.8-23V368.9c0-20.4 22.1-33.2 39.8-23L687 490.2c17.7 10.2 17.7 35.8 0 46z" p-id="4145"></path></svg>
                                    <div class="screen">
                                        <img src="{{ asset_upload($goods->video_cover) }}" alt="Video">
                                    </div>
                                </li>
                            </ul>
                            <figure class="pic" >
                                <img id="cover" style="position:relative;z-index:1;" src="{{ asset_upload($goods->img) }}"  alt="{{$goods->name}}">
                                <video id="cover-video" style="position:absolute;top:0;left:0;z-index:0;" loop="" muted="" playsinline="" autoplay poster="{{ asset_upload($goods->video_cover) }}">
                                    <source src="{{ asset_upload($goods->video) }}" type="video/mp4">
                                </video>
                                <p class="name {{ $goods->name_map_position }} {{ $goods->name_class }}" style="--rotate:{{ $goods->name_map_rotate }}deg;z-index:1" data-name="{{ $goods->name }}">{{ $goods->name }}</p>
                                <p class="body {{ $goods->three_map_position }} {{ $goods->three_class }}" style="--rotate:{{ $goods->three_map_rotate }}deg;z-index:1" data-body="{{ $goods->height.$goods->three_separator.$goods->weight.$goods->three_separator.$goods->cup }}">{{ $goods->height.$goods->three_separator.$goods->weight.$goods->three_separator.$goods->cup }}</p>
                            </figure>
                        </div>
                        
                        <div class="info">
                            <div class="name-box">
                                <h1 class="name">{{ $goods->name }}</h1>
                                @if($goods->audio)
                                    <div class="voicebox">
                                        <button id="playbutton" class="playbutton" data-inquire="" data-inquire-type="audio" data-inquire-position="詳情">
                                            <svg t="1690508793404" class="voiceplay" viewBox="0 0 1756 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1475" width="200" height="200">
                                                <path d="M1220.672 487.107657c-0.215771-0.374857-0.453486-0.731429-0.676571-1.098971-6.266514-11.536457-16.010971-21.813029-28.692114-29.134629l-462.6944-267.136c-11.918629-6.880914-24.797257-10.203429-37.198629-10.296686-0.239543-0.003657-0.475429-0.020114-0.7168-0.020114-0.142629 0-0.2816 0.010971-0.424229 0.0128-0.778971 0.007314-1.552457 0.034743-2.327771 0.065829-0.164571 0.007314-0.329143 0.009143-0.493714 0.018286-20.598857 1.000229-39.416686 11.029943-49.634743 28.728686-4.885943 8.462629-7.259429 17.751771-7.389257 27.1488-0.751543 4.337371-1.155657 8.815543-1.155657 13.4016l0 534.273829c0 4.586057 0.404114 9.064229 1.155657 13.4016 0.129829 9.3952 2.505143 18.686171 7.389257 27.1488 10.218057 17.696914 29.034057 27.726629 49.632914 28.728686 0.1664 0.009143 0.334629 0.010971 0.501029 0.018286 0.771657 0.032914 1.543314 0.060343 2.320457 0.065829 0.142629 0.001829 0.2816 0.0128 0.424229 0.0128 0.241371 0 0.479086-0.018286 0.718629-0.020114 12.401371-0.095086 25.278171-3.4176 37.1968-10.296686l462.6944-267.136c12.682971-7.3216 22.4256-17.598171 28.692114-29.134629 0.223086-0.367543 0.4608-0.724114 0.676571-1.098971 5.176686-8.965486 7.533714-18.859886 7.389257-28.8256C1228.205714 505.967543 1225.848686 496.073143 1220.672 487.107657z" p-id="1476"></path>
                                            </svg>

                                            <svg t="1690514152088" class="voicestop" viewBox="0 0 1756 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3269" width="200" height="200" display="none">
                                                <path d="M864 64H160C107 64 64 107 64 160v704c0 53 43 96 96 96h704c53 0 96-43 96-96V160c0-53-43-96-96-96z" p-id="3270"></path>
                                        </svg>
                                        </button>
                                        
                                        <div class="voice-wavy-line" style="animation-duration: {{ $goods->audio_time }}s;">
                                            <span class="voiceline"></span>
                                            <span class="voiceline"></span>
                                            <span class="voiceline"></span>
                                            <span class="voiceline"></span>
                                            <span class="voiceline"></span>
                                            <span class="voiceline"></span>
                                            <span class="voiceline"></span>
                                            <span class="voiceline"></span>
                                            <span class="voiceline"></span>
                                            <span class="voiceline"></span>
                                            <span class="voiceline"></span>
                                            <span class="voiceline"></span>
                                            <span class="voiceline"></span>
                                            <span class="voiceline"></span>
                                            <span class="voiceline"></span>
                                            <span class="voiceline"></span>
                                            <span class="voiceline"></span>
                                            <span class="voiceline"></span>
                                            <span class="voiceline"></span>
                                            <span class="voiceline"></span>
                                        </div>
                                        <span class="timer" id="timer" data-time="{{ $goods->audio_duration }}">{{ $goods->audio_duration }}"</span>
                                        <audio src="{{ asset_upload($goods->audio) }}" id="voice" style="width:0;"></audio>
                                    </div>
                                @endif
                            </div>
                            <div class="code">
                                <p class="title">身材密碼：</p>
                                <ul class="codebox">
                                    <li class="codeitem"><span class="num">{{ $goods->height }}</span>公分</li>
                                    <li class="codeitem"><span class="num">{{ $goods->weight }}</span>公斤</li>
                                    <li class="codeitem"><span class="num">{{ $goods->cup }}</span>罩杯</li>
                                </ul>
                            </div>
                            <div class="team">
                                <p class="teamabout">我在{{ $goods->team->name }}等你哦</p>
                                <p class="toabout"><a href="{{ url('team-about/'.$goods->team_id) }}">{{ $goods->team->name }}班表></a></p>
                            </div>

                            <div class="sales">
                                @foreach($goods->labels as $label)
                                <span class="sales-item">{{ $label }}</span>
                                @endforeach
                            </div>
                            <p class="btn-box">
                                <a class="button" href="{{ liaison_get('line_url') }}" data-inquire="" data-inquire-type="line" data-inquire-position="預約產品">
                                    <i class="iconfont">&#xebf5;</i>
                                    <span>預約我吧</span>
                                </a>

                            </p>
                        </div>
                    </div>
                </div>

                <section class="section shipping-section scroll-target init">

                    <div class="section-inner">
                        <h2 class="section-title">
                            如何開始？聯絡即可！
                        </h2>
                        <p class="section-title-sub">輕鬆幾步即可開始享受全身舒壓的樂趣</p>

                        <div class="main scroll-target init" >
                            <div class="step-main">
                                <div class="step">
                                    <div class="step-box">
                                        <p class="step-title-box"><span class="step-title">聯絡客服預約</span><span class="num">1</span></p>
                                        <p class="step-sub">點擊聯絡按鈕即可與客服聯絡，客服推薦至附近會館現場選妃，亦可向客服提出您的對美容師的要求喜好，客服會推薦多個與你匹配的美容師任君挑選，預約成功後即可按時前往美容師所在會館。</p>
                                    </div>
                                    
                                </div>
                                <div class="step">
                                    <div class="step-box">
                                        <p class="step-title-box"><span class="step-title">抵達會館選妃</span><span class="num">2</span></p>
                                        <p class="step-sub">進館即有親切行政接待，與您簡單確認後即可現場選妃。溫馨提醒：有看上再消費，看不上可以直接打槍，幹部可以安排您至旁邊店家繼續選妃，請放心精品舒壓絕不會酸客人，也絕不強迫客人消費。</p>
                                    </div>
                                    
                                </div>
                                <div class="step">
                                    <div class="step-box">
                                        <p class="step-title-box"><span class="step-title">放鬆等待美容師</span><span class="num">3</span></p>
                                        <p class="step-sub">不管您是現場選妃還是預約，當你櫃檯買單後行政會帶領您到您的包廂。包廂內乾淨衛生、設施齊全，美容師約10分鐘後進包廂，這時您可以好好洗個澡等候美容师敲門啦。（您也可以等美容師進來陪您一起洗澡澡唷）</p>
                                    </div>
                                    
                                </div>
                                <div class="step">
                                    <div class="step-box">
                                        <p class="step-title-box"><span class="step-title">開始愉快舒壓</span><span class="num">4</span></p>
                                        <p class="step-sub">美容師都很有禮貌，先幫你背部按摩聊聊天，前戲會開始調情輕功，再來就是重點部位的加強。如果預算，也可以跟美容師聊聊加值服務，放心問都有機會。精品舒壓期待每位客人每次來舒壓都有個Happy Ending！</p>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                    </div>

                </section>

                <section class="section-qa">
                    <div class="section-inner">
                        <h2 class="section-title">舒壓常見問題</h2>
                        <p class="section-title-sub">新手小白想舒壓卻有困擾？老司機有疑惑？專業客服全部為您解答</p>
                        
                        <div class="qa-sec">
                            @foreach($questions as $item)
                                <div class="qa-card">
                                    <div class="chat-sec">
                                        <div class="chat-box">
                                            <i class="iconfont avatar">&#xe6ee;</i>
                                            <div class="chat-content">
                                                <p class="name">匿名客人</p>
                                                <div class="chat-text-box">
                                                    <p class="chat-text">{{ $item->title }}</p>
                                                </div>

                                            </div>
                                        </div>

                                        <div class="title-toggle">
                                            <span class="bars"></span>
                                            <span class="bars"></span>
                                        </div>

                                    </div>
                                    <div class="chat-sec answer">
                                        <div class="chat-box">
                                            <img src="/static/img/linepic.jpg" alt="">
                                            <div class="chat-content">
                                                <p class="name">精品舒壓專業客服</p>
                                                @php
                                                    $answer = explode(PHP_EOL,$item->answer)
                                                @endphp
                                                @foreach($answer as $v)
                                                    @if($v)
                                                        <div class="chat-text-box">
                                                            <p class="chat-text">{{ trim($v) }}</p>
                                                        </div>
                                                    @endif
                                                @endforeach

                                            </div>
                                        </div>

                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <a class="trytry" href="{{ liaison_get('line_url') }}" data-inquire="" data-inquire-type="line" data-inquire-position="常見問題">仍然有疑惑？試試向Line客服提問</a>
                    </div>
                </section>
                
            </div>

        </div>
    </div>




@endsection
